/*
  公共样式 （ 用于样式微调 ）
  模板用法：
  <template>
   <div class="fr text-right pl-10 pr-10">
     <button>向右浮动，文字居右，左右内边距为10像素</button>
   </div>
  </template>
*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

fieldset,
img {
  border: 0
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal
}

ol,
ul {
  list-style: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal
}

html,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Microsoft YaHei", "\\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
  font-size: 14px;
  height: 100%;
  background: #fff;
}

a {
  text-decoration: none;
  color: #333;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

iframe {
  border: none;
  width: 100%;
  height: 100%;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* 高度100%填满 */
.height-fill {
  height: 100%;
}

.width-fill {
  width: 100%;
}

/*文本居右*/

.text-right {
  text-align: right
}

.font-bold {
  font-weight: bold;
}

/*文本居中*/

.text-center {
  text-align: center
}

/*段落文本不换行*/

.text-nowrap {
  white-space: nowrap
}

/*强制段落文本换行*/

.text-wrap,
.text-wrap td,
.text-wrap th {
  word-wrap: break-word;
  word-break: break-all;
}

/*文本超出省略*/

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 文本转小写 */

.text-lowercase {
  text-transform: lowercase
}

/* 文本转大写 */

.text-uppercase {
  text-transform: uppercase
}

/* 首字母大写 */

.text-capitalize {
  text-transform: capitalize
}

/* 添加下划线 */

.text-underline {
  text-decoration: underline
}

/*浮动*/

/* 左浮动 */
.fl {
  float: left;
}

/* 右浮动 */
.fr {
  float: right;
}

/* 清除浮动 */
.cf {
  zoom: 1;
}

.cf:before,
.cf:after {
  content: '';
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.cf:after {
  clear: both;
}

/* 外边距 0像素 */
.mg {
  margin: 0 !important;
}

/* 外边距 5像素 */
.mg-5 {
  margin: 5px !important;
}

.mg-10 {
  margin: 10px !important;
}

.mg-15 {
  margin: 15px !important;
}

.mg-20 {
  margin: 20px !important;
}

/* 上外边距 0像素 */
.mt {
  margin-top: 0 !important;
}

/* 上外边距 5像素 */
.mt-5 {
  margin-top: 5px !important;
}

.mt-10 {
  margin-top: 10px !important;
}

.mt-15 {
  margin-top: 15px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

/* 左外边距 0像素 */
.ml {
  margin-left: 0 !important;
}

/* 左外边距 5像素 */
.ml-5 {
  margin-left: 5px !important;
}

.ml-10 {
  margin-left: 10px !important;
}

.ml-15 {
  margin-left: 15px !important;
}

.ml-20 {
  margin-left: 20px !important;
}

/* 右外边距 0像素 */
.mr {
  margin-right: 0 !important;
}

/* 右外边距 5像素 */
.mr-5 {
  margin-right: 5px !important;
}

.mr-10 {
  margin-right: 10px !important;
}

.mr-15 {
  margin-right: 15px !important;
}

.mr-20 {
  margin-right: 20px !important;
}

/* 下外边距 0像素 */
.mb {
  margin-bottom: 0 !important;
}

/* 下外边距 5像素 */
.mb-5 {
  margin-bottom: 5px !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.mb-15 {
  margin-bottom: 15px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

/* 内边距 0像素 */
.pd {
  padding: 0 !important;
}

/* 内边距 5像素 */
.pd-5 {
  padding: 5px !important;
}

.pd-10 {
  padding: 10px !important;
}

.pd-15 {
  padding: 15px !important;
}

.pd-20 {
  padding: 20px !important;
}

/* 上内边距 0像素 */
.pt {
  padding-top: 0 !important;
}

/* 上内边距 5像素 */
.pt-5 {
  padding-top: 5px !important;
}

.pt-10 {
  padding-top: 10px !important;
}

.pt-15 {
  padding-top: 15px !important;
}

.pt-20 {
  padding-top: 20px !important;
}

/* 左内边距 0像素 */
.pl {
  padding-left: 0 !important;
}

/* 左内边距 5像素 */
.pl-5 {
  padding-left: 5px !important;
}

.pl-10 {
  padding-left: 10px !important;
}

.pl-15 {
  padding-left: 15px !important;
}

.pl-20 {
  padding-left: 20px !important;
}

/* 右内边距 0像素 */
.pr {
  padding-right: 0 !important;
}

/* 右内边距 5像素 */
.pr-5 {
  padding-right: 5px !important;
}

.pr-10 {
  padding-right: 10px !important;
}

.pr-15 {
  padding-right: 15px !important;
}

.pr-20 {
  padding-right: 20px !important;
}

/* 下内边距 0像素 */
.pb {
  padding-bottom: 0 !important;
}

/* 下内边距 5像素 */
.pb-5 {
  padding-bottom: 5px !important;
}

.pb-10 {
  padding-bottom: 10px !important;
}

.pb-15 {
  padding-bottom: 15px !important;
}

.pb-20 {
  padding-bottom: 20px !important;
}

/*元素显示与隐藏*/

/* 隐藏 */
.hide {
  display: none !important
}

/* 显示 */
.show {
  display: block !important;
}

/* 不可见（占据页面空间） */
.invisible {
  visibility: hidden !important;
}

/* 鼠标默认样式 */
.c-default {
  cursor: default;
}

/* 鼠标小手 */
.c-pointer {
  cursor: pointer;
}

/* 转行内块 */
.d-block {
  display: inline-block;
}

.d-flex {
  display: flex;
}

/*滚动条样式*/
/*定义滚动条的高宽*/
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
  display: none !important;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px !important;
  background: #888 !important;
  -webkit-box-shadow: inset 0 0 1px #888 !important;
}

::-webkit-scrollbar-thumb:hover {
  background: #555 !important;
}

::-webkit-scrollbar-corner {
  background: #fdfdfd !important;
}